<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2024/6/3
  Time: 11:48
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>网络爬虫</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <style>
        #crawlIframe {
            width: 100%;
            height: 400px;
            border: 1px solid #ddd;
            margin-top: 20px;
        }
    </style>
</head>
<body>
<div class="jumbotron jumbotron-fluid text-center bg-primary text-white">
    <div class="container">
        <h1 class="display-4">网络爬虫</h1>
        <p class="lead">请输入要爬取的URL</p>
    </div>
</div>

<div class="container mt-5">
    <div class="row justify-content-center">
        <div class="col-md-10">
            <div class="card">
                <div class="card-body">
                    <form id="crawlerForm">
                        <div class="form-group">
                            <label for="url">请输入网址：</label>
                            <input type="text" class="form-control" id="url" name="url" required>
                        </div>
                        <button type="submit" class="btn btn-success btn-block">爬取内容</button>
                    </form>
                    <iframe id="crawlIframe" class="mt-4"></iframe>
                    <div id="parsedContent" class="mt-4"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<footer class="footer bg-dark text-white text-center mt-5">
    <div class="container">
        <p class="mb-0 py-3">&copy; 2024 基于SSM实现爬虫和Sql注入的Web应用. 保留所有权利.</p>
    </div>
</footer>

<script>
    $(document).ready(function(){
        $('#crawlerForm').on('submit', function(e){
            e.preventDefault();
            var url = $('#url').val();

            $.ajax({
                type: 'POST',
                url: '/crawl', // 这里填写你的后端Controller路径
                data: JSON.stringify({url: url}),
                contentType: 'application/json',
                success: function(response){
                    // 将爬取到的页面嵌入到iframe中
                    var iframe = document.getElementById('crawlIframe');
                    iframe.srcdoc = response.htmlContent;

                    // 在解析区域显示爬取到的内容
                    var parsedDataHtml = '<div class="alert alert-success"><h4>解析内容：</h4><pre>';
                    $.each(response.parsedData, function(key, value) {
                        parsedDataHtml += key + ': ' + value + '\n';
                    });
                    parsedDataHtml += '</pre></div>';
                    $('#parsedContent').html(parsedDataHtml);
                },
                error: function(){
                    $('#parsedContent').html('<div class="alert alert-danger">爬取失败，请稍后再试</div>');
                }
            });
        });
    });
</script>
</body>
</html>
